<template>

    <view class="smart-panel-h">
        <navigator url="/pages/0928/view/view" open-type="navigate">
            <text>跳转到新页面[navigate]</text>
        </navigator>
    </view>

    <view class="smart-panel-h">
        <navigator url="/pages/API/API" open-type="switchTab">
            <text>在当前页打开[switchTab]</text>
        </navigator>
    </view>

    <view class="smart-panel-h">
        <navigator url="/pages/module/module" open-type="reLaunch">
            <text>跳转tab页面[reLaunch]</text>
        </navigator>
    </view>

</template>

<script>
    // export default {
    //     data() {
    //         return {

    //         }
    //     },
    //     methods: {
    //         goDetailPage(e) {
    //             if (typeof e === 'string') {
    //                 uni.navigateTo({
    //                     url: '/pages/' + e + '/' + e
    //                 });
    //             } else {
    //                 uni.navigateTo({
    //                     url: e.url
    //                 });
    //             }
    //         }
    //     }
    // }
</script>

<style>
    page {
        --smart-main: #2979ff;
        /* 主色 */
        --smart-main-light: #ecf5ff;
        /* 浅背景 */
        --smart-border: #e5e5e5;
        /* 分割线 */
        --smart-text: #333;
        /* 正文 */
        --smart-text-light: #666;
        /* 辅助文字 */
        --smart-radius: 12rpx;
        /* 圆角 */
        --smart-gap: 20rpx;
        /* 通用间距 */
    }

    /* ========== 页面级 ========== */
    page {
        background-color: #f8f8f8;
        font-size: 32rpx;
        color: var(--smart-text);
        line-height: 1.6;
        padding-bottom: env(safe-area-inset-bottom);
        /* 底部安全区 */
    }

    /* ========== 容器标题 ========== */
    .smart-container {
        margin: var(--smart-gap) var(--smart-gap) 0;
        padding: 0 24rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: var(--smart-main);
        letter-spacing: 2rpx;
    }

    /* ========== 面板 ========== */
    .smart-panel-h {
        position: relative;
        margin: 0 var(--smart-gap);
        margin-top: var(--smart-gap);
        padding: 28rpx 0;
        background: #fff;
        border-radius: var(--smart-radius);
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .smart-panel-h text {
        display: block;
        padding-left: 40rpx;
        color: var(--smart-text);
    }

    /* 隐藏面板彻底不占位 */
    .smart-panel-h[hidden="true"] {
        display: none !important;
    }

    /* 手指按下反馈 */
    .smart-panel-h:active {
        transform: scale(0.97);
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    /* ========== 宽屏适配 ========== */
    @media (min-width: 600rpx) {

        .smart-container,
        .smart-panel-h {
            max-width: 700rpx;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
</style>